<template>
	<view class="filter-page">
		<view :style="{height:$store.state.StatusBar.statusBar + 'px'}"></view>
		<view class="flex_r fa_c nav">
			<view class="flex_c_c nav-item" v-for="(item,index) in tabList" :key="index"
				@click="switchTabbarPage(index)">
				<view class="text_34 nav-item-title c-primary">
					{{item.title}}
				</view>
				<view class="nav-itemimg" :class="{nav_itemimg:currentIndex !== index}">
					<view class="active-line"></view>
				</view>
			</view>
		</view>
		<scroll-view :style="{height:scrollHeight+'px'}" scroll-y>
			<view v-if="currentIndex == 1" class="z_index2 flex_r item"
				@tap="to('/pages/m-pages/m-articleList/index?type=1')">
				<view class="item-img">
					<image class="img" mode="aspectFill" src="./img/ic_message_system.png"></image>
				</view>
				<view class="flex1 nowrap_ item-r">
					<view class="flex_r fj_b name">
						<view class="text_32 c-fff">
							系统信息
						</view>
						<view class="text_22 c-999">
							{{info.xitong.createtime}}
						</view>
					</view>
					<view class="text_26 c-999 nowrap_ text">
						{{info.xitong.title}}
					</view>
					<view class="m-line">
						<m-line color="#c5c5c5" length="100%" :hairline="true"></m-line>
					</view>
				</view>
			</view>
			<view v-if="currentIndex == 1" class="z_index2 flex_r item"
				@tap="to('/pages/m-pages/m-articleList/index?type=2')">
				<view class="item-img">
					<image class="img" mode="aspectFill" src="./img/ic_message_platform.png"></image>
				</view>
				<view class="flex1 nowrap_ item-r">
					<view class="flex_r fj_b name">
						<view class="text_32 c-fff">
							平台信息
						</view>
						<view class="text_22 c-999">
							{{info.pingtai.createtime}}
						</view>
					</view>
					<view class="text_26 c-999 nowrap_ text">
						{{info.pingtai.title}}
					</view>
					<view class="m-line">
						<m-line color="#c5c5c5" length="100%" :hairline="true"></m-line>
					</view>
				</view>
			</view>
			<view v-if="currentIndex == 1" class="z_index2 flex_r item" @tap="handleRoute(kf.conversationID)">
				<view class="item-img">
					<image :src="kf.userProfile.avatar" mode="aspectFill"></image>
				</view>
				<view class="size_white text_20 item-UNREAD" v-if="kf.unreadCount > 0">
					{{ kf.unreadCount }}
				</view>
				<view class="flex1 nowrap_ item-r">
					<view class="flex_r fj_b name">
						<view class="text_32 c-fff">
							{{kf.conversationName}}
						</view>
						<view class="text_22 c-999">
							{{kf.timeago}}
						</view>
					</view>
					<view class="text_22 c-999 nowrap_ text">
						{{kf.lastMessage.messageForShow}}
					</view>
					<view class="m-line">
						<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
					</view>
				</view>
			</view>
			<view v-if="currentIndex == 0" class="z_index2 flex_r item" v-for="(item,index) in conversationList"
				@tap="handleRoute(item.conversationID)">
				<view class="item-img">
					<image :src="item.setConversationAvatar" mode="aspectFill"></image>
				</view>
				<view class="size_white text_20 item-UNREAD" v-if="item.unreadCount > 0">
					{{ item.unreadCount }}
				</view>
				<view class="flex1 nowrap_ item-r">
					<view class="flex_r fj_b name">
						<view class="text_32 c-fff">
							{{item.conversationName}}
						</view>
						<view class="text_22 c-999">
							{{item.timeago}}
						</view>
					</view>
					<view class="text_22 c-999 nowrap_ text">
						{{item.lastMessage.messageForShow}}
					</view>
					<view class="m-line">
						<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				show: false,
				info: {
					xitong: {
						title: '',
						createtime: ''
					},
					pingtai: {
						title: '',
						createtime: ''
					}
				},
				currentIndex: 0,
				tabList: [{
						title: '消息'
					},
					{
						title: '系统'
					}
				],
				conversationID: '',
				searchKey: '',
				conversationList: [],
				kf: {},
				showSelectTag: false,
			};
		},
		computed: {
			isLogin() {
				return this.$store.state.isLogin;
			},
			scrollHeight() {
				const tophight = uni.upx2px(100)
				return this.$store.state.StatusBar.screenHeight - this.$store.state.StatusBar.statusBar - tophight - 50
			},
		},
		watch: {
			isLogin(val) {
				if (val) {
					this.getConversationList();
					uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
				}
			},
		},
		onShow() {
			if (this.isLogin) {
				this.getConversationList();
				uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated);
			}
			this.getInfo();
		},
		methods: {
			to,
			async getInfo() {
				let res = await this.$c.post('/app/pingtai/getPingtaiAndXitong')
				if (res.code == 0) {
					this.info = res.data
				}
			},
			switchTabbarPage(index) {
				this.currentIndex = index
			},
			handleRoute(id) {
				console.log("客服: " + JSON.stringify(id));
				uni.navigateTo({
					url: `/im/chat/chat?conversationID=${id}`,
				});
			},
			onConversationListUpdated(event) {
				this.setList(event.data)
			},

			getConversationList() {
				uni.$TUIKit.getConversationList().then(imResponse => {
					this.setList(imResponse.data.conversationList)
				});
				uni.$TUIKit.getConversationProfile('C2C10000').then(res => {
					console.log("客服: " + JSON.stringify(res));
					this.kf = res.data.conversation
				});
			},
			setList(list) {
				let conversationList = [];
				for (let i in list) {
					let conversation = list[i]
					conversation.conversationName = this.getConversationName(conversation),
						conversation.setConversationAvatar = this.setConversationAvatarHandler(conversation),
						conversation.timeago = this.caculateTimeago(conversation.lastMessage.lastTime * 1000)
						console.log("客服: " + JSON.stringify(conversation.conversationID));
					if (!('C2Cadministrator' == conversation.conversationID || 'C2C10000' == conversation.conversationID)) {
						conversationList.push(conversation)
					}
				}
				this.conversationList = conversationList;
			},
			getConversationName(conversation) {
				if (conversation.type === "@TIM#SYSTEM") {
					return "系统通知";
				}

				if (conversation.type === "C2C") {
					return (
						conversation.userProfile.nick ||
						conversation.userProfile.userID
					);
				}

				if (conversation.type === "GROUP") {
					return (
						conversation.groupProfile.name || conversation.groupProfile.groupID
					);
				}
			},

			setConversationAvatarHandler(conversation) {
				if (conversation.type === "@TIM#SYSTEM") {
					return "https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/msg/system.png";
				}

				if (conversation.type === "C2C") {
					return (
						conversation.userProfile.avatar ||
						"https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png"
					);
				}

				if (conversation.type === "GROUP") {
					return (
						conversation.groupProfile.avatar ||
						"https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/gruopavatar.png"
					);
				}
			},
			caculateTimeago(dateTimeStamp) {
				const minute = 1000 * 60; // 把分，时，天，周，半个月，一个月用毫秒表示

				const hour = minute * 60;
				const day = hour * 24;
				const week = day * 7;
				const now = new Date().getTime(); // 获取当前时间毫秒

				const diffValue = now - dateTimeStamp; // 时间差

				let result = "";

				if (diffValue < 0) {
					return;
				}

				const minC = diffValue / minute; // 计算时间差的分，时，天，周，月

				const hourC = diffValue / hour;
				const dayC = diffValue / day;
				const weekC = diffValue / week;

				if (weekC >= 1 && weekC <= 4) {
					result = ` ${parseInt(weekC, 10)}周前`;
				} else if (dayC >= 1 && dayC <= 6) {
					result = ` ${parseInt(dayC, 10)}天前`;
				} else if (hourC >= 1 && hourC <= 23) {
					result = ` ${parseInt(hourC, 10)}小时前`;
				} else if (minC >= 1 && minC <= 59) {
					result = ` ${parseInt(minC, 10)}分钟前`;
				} else if (diffValue >= 0 && diffValue <= minute) {
					result = "刚刚";
				} else {
					const datetime = new Date();
					datetime.setTime(dateTimeStamp);
					const Nyear = datetime.getFullYear();
					const Nmonth =
						datetime.getMonth() + 1 < 10 ?
						`0${datetime.getMonth() + 1}` :
						datetime.getMonth() + 1;
					const Ndate =
						datetime.getDate() < 10 ?
						`0${datetime.getDate()}` :
						datetime.getDate();
					result = `${Nyear}-${Nmonth}-${Ndate}`;
				}

				return result;
			}
		},
	};
</script>
<style lang="scss" scoped>
	.nav {
		width: 100%;
		height: 100rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;


		.nav-item {
			width: 130rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 24rpx;

			.nav-itemimg {
				position: relative;
				top: -4rpx;
				width: 50rpx;
				height: 30rpx;
				transition: all .3s;
				opacity: 1;
			}

			.active-line {
				width: 100%;
				height: 6rpx;
				border-radius: 12rpx;
				background: #FDB175;
				margin-top: 12rpx;
			}

			.nav_itemimg {
				opacity: 0;
				transition: all .3s;
			}
		}
	}

	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}

	.item {
		position: relative;
		box-sizing: border-box;
		padding: 20rpx 0 0rpx 30rpx;
		width: 100%;

		.item-img {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 50rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			image {
				width: 100rpx;
				height: 100rpx;
			}

		}

		.item-UNREAD {
			position: absolute;
			top: 6rpx;
			left: 120rpx;
			min-width: 40rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 20rpx;
			background-color: #ff0000;
		}

		.item-r {
			position: relative;

			.name {
				width: 100%;
				box-sizing: border-box;
				padding-right: 20rpx;
				margin-bottom: 15rpx;
			}

			.text {
				width: 100%;
				box-sizing: border-box;
				padding-right: 40rpx;
			}

			.m-line {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
			}
		}

	}
</style>